import { Component } from 'react';
import { Modal, Form, Input, Select } from 'antd';
import {dicListByPcode} from "../utils/dictionary";

const FormItem = Form.Item;
const { TextArea } = Input;
const Option = Select.Option;

class BugsEditModal extends Component {

  /**
   * 初始化
   * @param props
   */
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
    };
  }

  /**
   * 点击子组件调用方法
   * @param e
   */
  showModelHandler = (e) => {
    if (e) e.stopPropagation();
    this.setState({
      visible: true,
    });
  };

  /**
   * 点击取消调用方法
   */
  hideModelHandler = () => {
    this.setState({
      visible: false,
    });
  };

  /**
   * 点击OK 调用方法
   */
  okHandler = () => {
    const { onOk } = this.props;
    this.props.form.validateFields((err, values) => {
      if (!err) {
        onOk(values);
        this.hideModelHandler();
      }
    });
  };

  render() {
    const { children } = this.props;
    const { getFieldDecorator } = this.props.form;
    const { module, func, remark, createUser, solution, type } = this.props.record;
    const arr = dicListByPcode('ORDER_TYPE');

    const formItemLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
    };
    return (
      <span>
        <span onClick={this.showModelHandler}>
          { children }
        </span>
        <Modal
          title="新建BUG"
          visible={this.state.visible}
          onCancel={this.hideModelHandler}
          onOk={this.okHandler}
        >
          <Form onSubmit={this.okHandler}>
            <FormItem
              {...formItemLayout}
              label="模块"
            >
              {
                getFieldDecorator('module', {
                  initialValue: module,
                })(<Input />)
              }
            </FormItem>
            <FormItem
              {...formItemLayout}
              label="功能"
            >
              {
                getFieldDecorator('func', {
                  initialValue: func,
                })(<Input />)
              }
            </FormItem>
            <FormItem
              {...formItemLayout}
              label="描述"
            >
              {
                getFieldDecorator('remark', {
                  initialValue: remark,
                })(<TextArea rows={4}/>)
              }
            </FormItem>
            <FormItem
              {...formItemLayout}
              label="提出人"
            >
              {
                getFieldDecorator('createUser', {
                  initialValue: createUser,
                })(<Select>
                  <option value={1}>任光辉</option>
                  <option value={2}>灵芝</option>
                  <option value={3}>孟林杰</option>
                  <option value={4}>任总</option>
                </Select>)
              }
            </FormItem>
            <FormItem
              {...formItemLayout}
              label="状态"
            >
              {
                getFieldDecorator('type', {
                  initialValue: type,
                })(<Select>
                    {arr.map((item, index) => {
                      return <option key={index} value={item.code}>{item.name}</option>
                    })}
                </Select>)
              }
            </FormItem>
            <FormItem
              {...formItemLayout}
              label="解决方案"
            >
              {
                getFieldDecorator('solution', {
                  initialValue: solution,
                })(<TextArea rows={4}/>)
              }
            </FormItem>
          </Form>
        </Modal>
      </span>
    )
  }
}

export default Form.create()(BugsEditModal);
